<template>
	<view class="content">
		<!-- -->
		<view class="nav_bar">
			<image src="../../static/logo.png"></image>
			<u-search :showAction="true" actionText="搜索" ></u-search>
			
		</view>
			<view class="swiper_wrap">
				<swiper   :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
					<swiper-item v-for="item in indexData.bannerList" :key="item._id">
						<view class="swiper-item">
							<image :src="'http://127.0.0.1:3000'+item.Cpic" mode=""></image>
						</view>
					</swiper-item>
				
				</swiper>
			</view>
			<view>
				<list-com title="好评榜" :list="indexData.goodList
"></list-com>
			</view>
	</view>
</template>

<script>
	// 组件可以使用小程序和vue的生命周期
	import listCom from './list.vue'
	import {getHomeData} from '@/api/home.js'
	export default {
		components:{listCom},
		props:{},
		
		data() {
			return {
				title: 'Hello',
				indexData:{}
			}
		},
		onLoad() {

		},
		onShow(){
			
		},
		created(){
			console.log("组件初始化")
			this.getData();
		},
		mounted(){
			console.log("组件挂在后")
		},
		methods: {
			// 获取首页数据的接口
			async getData(){
					let res=await getHomeData()
					console.log(res,"--------")
					this.indexData=res.data;
					
			}
		},
		computed:{},
		watch:{}
	}
</script>

<style lang="scss">
	.nav_bar{
		display: flex;
		align-items: center;
		justify-content: space-between;
		image{
			width: 50rpx;
			height: 50rpx;
		}
	}
	.swiper_wrap{
		width:100%;
		height: 300px;
		swiper{
			swiper-item{
				height: 300px;
			image{
					width:100%;
					height: 300px;
				}
			}
		}
	}
		
		
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
</style>
